
<template>
  <div class="user">
    <p>{{ name }} - {{ age }}</p>
    <p>user - show systemName【{{ systemName }}】</p>
    <button @click="changeSystemName">更改</button>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { computed, ref } from "vue";

// store
const store = useStore();

// store 变量
const systemName = computed(() => store.state.systemName);

// 声明常量
const name = "user - system";

const age = ref(0);

age.value = 34;

// 映射store 方法
const changeSystemName = () => {
  store.commit("changeSytemName", "vite-jsx");
};
</script>